<template>
	<view class="page_box bg-img">
		<u-navbar :is-back="true" title=" " v-if="1" :border-bottom="false" title-color="#fff" back-icon-color="#fff"></u-navbar>
		<button class="friendsInvited flex align-center justify-center cu-btn" @click="l.to('/pages/my/friendsInvited')">
			<text class="f28 ">邀请的好友</text>
		</button>

		<view class="w690 h762 info  padding-lg  bg-img">
			<view class="flex align-center mt30 justify-between">
				<view class="flex flex-direction">
					<view class="flex align-center">
						<text class="c f28 text-bold">邀请规则</text>
						<image
							src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210617111926.png"
							mode="aspectFill"
							class="w20 h20 margin-left-xs"
						></image>
					</view>
					<text class="c mt40">1. 推广邀请注册分佣</text>
					<text class="c mt30">2. 推荐好友报名活动分佣</text>
					<text class="c mt30">3. 下级好友推广可得佣金</text>
				</view>
				<view class="solidd w240 h240 r20 flex align-center justify-center">
					<view class="w200 h200 r10 bg-white flex align-center justify-center">
						<!-- <i class="cuIcon-loading2 cuIconfont-pulse f85 text-yellow" v-if="!data.qrcode_image"></i> -->
						<!-- <image :src="data.qrcode_image" mode="" class="w182 h182  " v-else></image> -->

						<ayQrcode
							ref="qrcode"
							:modal="modal_qr"
							:url="url"
							@hideQrcode="hideQrcode"
							:height="91"
							:width="91"
							style="width: 182rpx; height: 182rpx;"
						/>
					</view>
					<!-- <image :src="qrcode_image" mode="" class="w240 h240 bg-cyan"></image> -->
				</view>
			</view>
			<view class="mt68 flex align-center ">
				<view class="f-1 flex flex-direction  justify-between  h100">
					<view class="flex">
						<text class="ff text-white">我的上级</text>
						<text class=" f26 text-white hidden block" style="width: 30vw;">
							: {{ data.parent_name ? data.parent_name : '暂无邀请人' }}
						</text>
					</view>
					<text>
						<text class="ff  text-white">已邀请</text>
						<text class="f26 text-white ">: {{ data.user_count ? data.user_count : 0 }}人</text>
					</text>
				</view>
				<view class="f-1  flex flex-direction  justify-between h100 align-center">
					<text class="f26 text-white">您的邀请码为：</text>
					<text class="f36 text-bold  " style="color: #FFDE00;">{{ data.invite_code }}</text>
				</view>
			</view>
			<view class="mt40 flex justify-between ">
				<button class="cu-btn text-white flex align-center justify-center f30 w262 h90 btn" @click="inviteFriends">
					<text>邀请好友</text>
				</button>
				<!-- <button class="cu-btn text-black flex align-center justify-center f30 w262 h90 btn" @click="sharePoster">
                    <text>生成海报</text>
                </button> -->
			</view>
		</view>
		<yy-share :show="show" @close="show = false"></yy-share>
		<qrcode-poster ref="poster" :title="goods.title" :subTitle="goods.sub_title" :price="goods.price"></qrcode-poster>
		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
var wx = require('weixin-js-sdk');
import QrcodePoster from '@/components/zhangyu-qrcode-poster/zhangyu-qrcode-poster.vue';
import { pathToBase64, base64ToPath } from '../../common/js_sdk/mmmm-image-tools/index.js';
import ayQrcode from '@/components/ay-qrcode/ay-qrcode.vue';
export default {
	components: {
		QrcodePoster,
		ayQrcode,
	},
	data() {
		return {
			data: {},
			show: false,
			goods: {
				title: '尊享特权',
				sub_title: '九折优惠,免费品尝,推荐奖励,推一返三',
				//headerImg: 'https://oss.zhangyubk.com/%E8%8D%89%E8%8E%93%E5%8D%83%E5%B1%82.png',
				price: '',
			},
			qrcode_image: '',
			//二维码相关参数
			modal_qr: false,
			url: '', // 要生成的二维码值
		};
	},
	onShow() {},
	onLoad(e) {
		console.log('e :>> ', e);
		this.goods.price = e.card_now_price;
		this.myInvitation();
		// setTimeout(() => {
		// 	this.jsSdk();
		// }, 5000);
	},
	methods: {
		async inviteFriends() {
			this.show = true;
		},
		async jsSdk() {
			
			console.log('window.location.href :>> ', window.location.href);
			this.toPay(2).then(result => {
				
				wx.ready(() => {
					//需在用户可能点击分享按钮前就先调用
					var shareData = {
						title: '易道堂' + this.data.invite_code, // 分享标题
						desc: '分享描述', // 分享描述
						link: this.IMG + '?invite_code_encode=' + this.data.invite_code_encode, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						imgUrl: 'http://dmimg.5054399.com/allimg/pkm/pk/22.jpg', // 分享图标
						success: function() {
							// 设置成功
						},
					};
					// console.log('shareData.link :>> ', shareData.link);
					wx.updateTimelineShareData(shareData);
					wx.updateAppMessageShareData(shareData);
				});
			});
		},
		// 展示二维码
		showQrcode() {
			let _this = this;
			this.modal_qr = true;
			// uni.showLoading()
			setTimeout(function() {
				// uni.hideLoading()
				_this.$refs.qrcode.crtQrCode();
			}, 50);
		},

		//传入组件的方法
		hideQrcode() {
			this.modal_qr = false;
		},
		sharePoster() {
			uni.showLoading({
				title: '生成海报中...',
				mask: true,
			});
			base64ToPath(this.data.qrcode_image)
				.then(path => {
					console.log(path);
					this.is_show_model = false;
					this.$refs.poster.showCanvas(path);
				})
				.catch(error => {
					console.error(error);
				});
			//获取带参数二维码
		},
		async myInvitation() {
			let obj = {};
			const res = await this.$u.post('/UserInfo/inviteCenter', obj);

			this.data = res.data;
			this.url = this.IMG + '?invite_code_encode=' + res.data.invite_code_encode;
			//console.log('this.url  :>> ', this.url);
			this.showQrcode();
			this.jsSdk();
			
		},
	},
	onShareAppMessage() {
		//发送给朋友
		return {
			title: this.data.invite_code + uni.getStorageSync('data').user.id,
			path: '/pages/index/index?invite_code=' + this.data.invite_code + '&id=' + uni.getStorageSync('data').user.id,
			imageUrl: this.data.image_url, //显示图片长宽比是 5:4
			success: function(res) {
				if (res.errMsg == 'shareAppMessage:ok') {
					this.$refs.uToast.show({ title: '分享成功', type: 'success' });
				}
			},
		};
	},
};
</script>

<style lang="scss" scoped>
/deep/.box-qrcode {
	margin-left: 0 !important;
}
page {
	background-color: #6d5ffe !important;
}
.page_box {
	width: 100vw;
	height: 100vh;

	background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210729150059.png);
	/deep/ .u-navbar,
	.u-navbar-fixed {
		// position: fixed;
		// top: 0;
		// transform: translateX(-50%);
		// z-index: 99999;
		background: transparent !important;
	}
	/deep/ .u-navbar-placeholder {
		height: 0 !important;
	}

	.friendsInvited {
		position: fixed;
		top: 250rpx;
		left: 0;
		width: 180rpx;
		height: 60rpx;
		background: #877ef5;
		border-radius: 0rpx 30rpx 30rpx 0rpx;
		color: #ffffff;
		text {
			white-space: nowrap;
		}
	}
	.btn {
		background: #ffc633;
		box-shadow: 0rpx 5rpx 0rpx 0rpx #dc6c1a;
		border-radius: 45rpx;
	}
	.ff {
		display: inline-block;
		font-size: 26rpx;
		width: 120rpx;
		text-align-last: justify;
	}
	.info {
		background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210729145207.png);
		position: fixed;
		bottom: 20rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	.c {
		color: #3f2498;
	}
	.solidd {
		border: 1rpx solid #ffffff;
	}
}

.content_box {
}
</style>
